<template>
	<view class="content">
        <u-navbar bgColor="#fff" :fixed="true" :shadow="true"
            :safeAreaInsetTop="true" :placeholder="true"
            leftIconColor="#151C24" @leftClick="back"
            title="修改密码" titleColor="#151C24" >
        </u-navbar>
       
        <view class="uni-area u-p-t-30">
            <view class="uni-shadow uni-edit-password">
                <u--form labelPosition="top" :model="form" :rules="rules" ref="form">
                    <view class="font-bold">旧密码</view>
                    <u-form-item label="" prop="oldPassword" :borderBottom="true" ref="item1">
                        <u--input v-model="form.oldPassword" border="none" 
                            placeholder="请输入旧密码" placeholderClass="uni-placeholder">
                        </u--input>
			        </u-form-item>
                    <view class="u-m-t-40 font-bold">新密码</view>
                    <u-form-item label="" prop="newPassword" :borderBottom="true" ref="item2">
                        <u--input v-model="form.newPassword" border="none" 
                            placeholder="请输入新密码" placeholderClass="uni-placeholder">
                        </u--input>
			        </u-form-item>
                    <view class="u-m-t-40 font-bold">再次输入新密码</view>
                    <u-form-item label="" prop="affirmPassword" :borderBottom="true" ref="item3">
                        <u--input v-model="form.affirmPassword" border="none" 
                            placeholder="请再次输入新密码" placeholderClass="uni-placeholder">
                        </u--input>
			        </u-form-item>

                    <view class="u-m-t-40 font-bold">请输入短信验证码</view>
                    <view class="u-m-t-30 u-font-26 font-bold">
                        <text class="u-m-r-16">手机号:</text>
                        <text class="uni-dec-color">{{userInfo.phone}}</text>
                    </view>

                    <u-form-item label="" :borderBottom="false" ref="item3">
                        <text class="u-font-26 font-bold u-m-r-16">验证码:</text>
                        <u-input v-model="form.code" border="bottom" 
                            placeholder="请输入验证码" placeholderClass="uni-placeholder">
                            <view slot="suffix" class="code" @tap="getCode">{{codeTxt}}</view>
                        </u-input>
			        </u-form-item>
                </u--form>
            </view>
            <u-button type="primary" text="确认修改" @tap="submit"
                style="width:600rpx;height:86rpx;border-radius:20rpx;margin-top:66rpx">
            </u-button>
        </view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>


<script>
	export default {
		data() {
			return {
                userInfo: uni.getStorageSync("userInfo"), 
                form:{
                    oldPassword: '', // 旧密码
                    newPassword: '', // 新密码
                    affirmPassword: '', // 确认密码
                    code: '' // 验证码
                },
                // 验证码相关
                formCode:{
                    id: 0, // 验证码id【必传】 
                    ywbh: 0, // 业务编号【必传】
                    shortMessage: null, // 验证码【必传】
                },
                countDown: 60,
                codeTxt: '获取验证码', 
                rules: {
                    'oldPassword': {
                        type: 'string',
                        required: true,
                        message: '请输入旧密码',
                        trigger: ['blur', 'change']
                    },
                    'newPassword':{
                        required: true,
                        message: '请输入新密码',
                        trigger: ['blur', 'change']
                    },
                    'affirmPassword':[
                        {
                            required: true,
                            message: '请输入确认密码',
                            trigger: ['blur', 'change']
                        },
                        {
                            validator: (rule, value, callback) => {
                                return  value == this.form.newPassword
                            },
                            message: '确认密码与新密码不一致',
                            trigger: ['change','blur'],
                        }
                    ]
                },
            }
		},

		onLoad() {},

        onReady(){
            // console.log('用户信息',this.userInfo)
        },

		methods: {
            // back
            back(){
                uni.navigateBack()
            },

            // 获取验证码
            getCode(){
                if( this.countDown == 60 ){
                    const parameter = {
                        ywbh: this.userInfo.acc,  // 用户账号【必传】
                        jssjh: this.userInfo.phone, // 用户联系电话【必传】
                    }
                    uni.showLoading({ title:'验证码获取中' })
                    this.$request(this,this.$apis.getCode,parameter).then(res=>{
                        // console.log('验证码',res)
                        this.formCode = {
                            id: res.id,
                            ywbh: res.ywbh,
                            shortMessage: res.messagecode
                        }
                        this.countDownFn()
                    }).then()
                }
            },
            // 倒计时
            countDownFn(){
                this.$tools.uToast(this, 'success','', '验证码已发送至'+this.userInfo.phone+'请注意查收', 3000 )
                const timer = setInterval(() => {
                    if( this.countDown == 0 ){
                        clearInterval( timer )
                        this.countDown = 60
                        this.codeTxt = '获取验证码'
                    }else{
                        this.countDown --
                        this.codeTxt = this.countDown<10?'0'+this.countDown+'s后重新发送':this.countDown+'s后重新发送'
                    }
                }, 1000)
            },

            // 提交
            submit(){
                // 先校验验证码
                this.formCode.shortMessage = this.form.code
                if( this.formCode.shortMessage ){
                    uni.showLoading({ title:'验证码校验中' })
                    this.$request(this,this.$apis.checkCode,this.formCode).then(res=>{
                        // console.log('验证码校验结果',res)
                        // 后修改密码
                        this.$refs.form.validate().then(res => {
                            const parameter = {
                                userId: this.userInfo.userId, // 用户编号【必传】
                                password1: this.form.oldPassword, // 旧密码【必传】
                                password2: this.form.newPassword //	新密码【必传】
                            }
                            // console.log('修改密码参数',parameter)
                            uni.showLoading({ title:'密码修改中' })
                            this.$request(this,this.$apis.updateUserPassword,parameter).then(res=>{
                                // console.log('修改密码结果',res)
                                this.$tools.uToast(this, 'success','', '密码修改成功', 1500, {}, ()=>{
                                    uni.reLaunch({ url: '/pages/login/login' })
                                })
                            })
                        })
                    }).then()
                }else{
                    this.$tools.uToast(this, 'warning','', '请输入验证码', 1500 )
                }
            }
		}
	}
</script>


<style lang="scss">
    .content{
        background: #FBFCFC; 
        .code{
            height: 38rpx;
            line-height: 38rpx;
            padding: 0 30rpx;
            font-size: 26rpx;
            font-weight: bold;
            color: $uni-color-success;
            border-left: 1rpx solid rgb(214, 215, 217);
        }
    }
</style>
